Bootstrap-排版Grid system

概念

• Bootstrap的排版是使用css flexbox
• 結構上要分為兩層：
  • 外層為row：
  • 內層為一到多個col-
• row容器就是一個flexbox
• Bootstrap的概念是將row容器中，一行分成12等分
  
• col-後面接的數字，就是在一行中，佔有幾個「1/12的空間」。例：col-3就代表佔了3/12的寬度空間
• 針對不同尺寸螢幕，可以定義各種尺寸的佔有空間。例：col-lg-3, col-sm-6會在lg size時佔有3/12，而在sm size時佔有6/12
  
• 如果一行中有兩欄，其加總空間未滿12/12，可以用offset製造空欄的效果。

  <div class="row">
      <div class="col-lg-3 col-sm-4">col-lg-3 col-sm-4</div>
      <div class="col-lg-5 col-sm-4">col-lg-5 col-sm-4</div>
      <div class="col-lg-2 col-lg-offset col-sm-4">col-lg-2 col-lg-offset col-sm-4</div>           
  </div>

實作

• Large時，一排四個
• Medium時，一排兩個
• Extra small時，一排一個

  <div class="row">
      <div class="col-lg-3 col-md-6">
      <div class="col-lg-3 col-md-6">
      <div class="col-lg-3 col-md-6">
      <div class="col-lg-3 col-md-6">
      <div class="col-lg-3 col-md-6">
      <div class="col-lg-3 col-md-6">
  </div>

成果

My Project-LonelyPlanet-Author section